<template>
  <h3>图书管理</h3>
  <el-divider />
  <div class="opt-div">
    <div>
      <!-- <el-form :inline="true" class="demo-form-inline">
        <el-input v-model="cname" placeholder="请输入" /><el-button
          @click="category_search"
          type="info"
          >搜索</el-button
        > -->
        <el-button type="primary" @click="to_add_book"
          ><el-icon><Plus /></el-icon>添加图书</el-button
        >
        <!-- </el-form> -->
    </div>
     <el-pagination
      v-model:current-page="pages.currentPage"
      v-model:page-size="pages.pageSize"
      :page-sizes="[5,10, 20, 50]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="bookData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> 
  </div>
  <el-table :data="bookData.list" :row-class-name="tableRowClassName">
    <el-table-column width="100" label="序号" type="index" />
    <el-table-column label="图书名称" prop="b_name" />
    <el-table-column label="类别" prop="c_name" />
    <el-table-column label="封面">
      <template #default="scope">
        <el-image style="width: 100px; height: 100px" :src="`${base_url+scope.row.b_cover}`" :fit="cover" />
      </template>
    </el-table-column>
    <el-table-column label="出版社" prop="publisher" />
    <el-table-column label="出版日期" prop="pubdate" />
    <el-table-column label="单价" prop="price" />
    <el-table-column label="库存数量" prop="book_num" />
    <el-table-column label="借阅次数" prop="borr_num" />

    <el-table-column label="状态" width="180px">
      <template #default="scope">
        <el-text class="mx-1" v-if="scope.row.b_state != 0" type="danger"
          >无库存</el-text
        >
        <el-text v-else class="mx-1" type="success">正常</el-text>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="260px">
      <template #default="scope">
        <el-button type="primary" size="small">详情</el-button>
        <el-button type="warning" size="small">编辑</el-button>
        <el-button type="danger" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import http from "../axios";

import { ref, onMounted } from "vue";
import {useRouter} from 'vue-router';
const pages = ref({
  pageNum: 1,
  pageSize: 10,
});
const router = useRouter();

const base_url = ref(import.meta.env.VITE_BASE_APP_PATH)

console.log(base_url.value);

const params = ref({
  bname: "",
});

const bookData = ref({});
const book_list = () => {
  http
    .get("/book/list", {
      params: {
        ...pages.value,...params.value
      }
    })
    .then((resp) => {
      console.log(resp);
      bookData.value = resp.data.data;
    });
};

onMounted(() => {
  book_list();
});

const to_add_book = ()=>{
    router.push('/home/book_add')
}

const handleSizeChange = (val)=>{
  pages.value.pageSize = val;
  book_list();
}
const handleCurrentChange = (val)=>{
  pages.value.pageNum = val;
  book_list();
}

const tableRowClassName = ({ row, rowIndex }) => {
  if (row.book_num <6) {
    return "danger-row";
  }
  return "";
};
</script>

<style>
.opt-div {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  align-items: center !important;
}
.el-table .danger-row {
  --el-table-tr-bg-color: rgba(241, 226, 25, 0.5);
}
</style>
